<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../dist/vue.js"></script>
</head>
<body>
    <!-- 
      什么是虚拟DOM？为什么虚拟DOM比原生DOM快？
      想必大家都听过操作DOM性能很差,但是这其中的原因又是什么呢？
    
      因为DOM是属于渲染引擎中的东西，而js又是js引擎中的东西。当我们通过js操作DOM的时候，这个操作就涉及到了两个线程之间的通信，操作DOM次数过多时势必会损耗性能；并且js操作DOM可能会引起页面的重绘、回流等情况。所以也就导致了性能上的问题。 那么既然DOM可以通过js对象来模拟，就可以利用虚拟DOM将频繁的DOM操作放在js层面，然后通过算法对比新旧js对象的最小差异并且实现局部更新DOM，减少了对真实DOM的直接操作，提高了渲染效率。

      目前流行的MVVM框架：vue和react,采用数据驱动视图模板，如果由传统模板引擎uanran，每一次数据改变会重新渲染整个视图，造成性能损耗。于是采用虚拟DOM，将视图模板抽离出来管理，利用数据绑定，同时也能通过比较新旧虚拟DOM 来计算得到真正需要更新的部分进行渲染。

      虚拟DOM本质就是js和真实DOM之间的一个缓存，js只操作虚拟DOM，最后渲染到真实DOM.

      具体实现流程（react版）：
      1) 创建阶段：
         使用jsx语法或调用React.createElement构建出虚拟DOM树，然后通过render触发渲染机制，将创建的虚拟DOM转化为真实DOM，并且缓存第一次的虚拟DOM。
      2) 更新阶段：
         setState、Hooks 调用后数据发生改变，会重新创建一个新的虚拟DOM树。然后通过diff算法在js层对比新旧虚拟DOM树，得到差异对象（补丁patches,是一个结构化的数据，包含了增加、更新、移除等）
      3) 最后根据差异对象一次性更新真实DOM树，对真实DOM进行最小化修改，渲染生成新的页面。之后的每一次更新都和上一次缓存的虚拟DOM 进行 diff对比。

    -->
    <!-- DOM 结构 -->
    <div id="app">
        <div id="wrap">
            <p class="title">News</p>
        </div>
    </div>

    <!-- 
    // 转为虚拟DOM 
    {
        type: 'div',
        props: {
            id: 'wrap'
        },
        children: [
            {
                type: 'p',
                props: {
                    className: 'title'
                }, 
                children: 'News'
            }
        ]
    }
    -->
    
</body>
<script>
    const vm = new Vue({
        el:'#app',
        data:{
        }
    })
</script>
</html>